<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/13 0013
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>爬虫管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="table" lay-filter="table">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">爬虫管理/爬虫策略</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="" lay-filter="example">

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">爬虫名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="spidername" name="spidername" placeholder="请输入爬虫名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>



                            <div class="layui-inline">
                                <button type="button" class="layui-btn layuiadmin-btn-list" id="btn-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>



                    </form>

                </div>
            </div>
        </div>
    </div>







</table>



<script type="text/html" id="toolbar">


    <div class="layui-btn-container">

        <button class="layui-btn" lay-event="save">新增</button>
        <button class="layui-btn" lay-event="remove">删除</button>
        <button class="layui-btn" lay-event="update">编辑</button>

    </div>
</script>






<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/layui.js" charset="utf-8"></script>
</body>
    <script>
        layui.use(['form','table','jquery','dropdown','layer','laydate'], function() {

            //初始化这些模块
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var laydate = layui.laydate;


            //构建 使用这些模块的方法
            table.render({
                elem: '#table'  //将页面的某个标签渲染为数据表格
                ,url:'${pageContext.request.contextPath}/admin/spider/queryByPage'
                ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                ,method:'post'
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '爬虫策略列表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'spiderid', title:'爬虫ID',hide:true, width:120, fixed: 'left', unresize: true, sort: true}
                    ,{field:'spidername', title:'爬虫名称', width:120}
                    ,{field:'spiderurl', title:'爬虫网址'}
                    ,{field:'spiderpath', title:'爬虫本地路径'}

                ]]
                ,page: true  //是否需要分页
            });



            //条件查询
            $("#btn-search").on('click',function(){
                var spidername=$("#spidername").val();

                table.reload('table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        'spidername':spidername,
                    }
                });
            });


            //监听工具栏的相关事件
            //头工具栏事件
            table.on('toolbar(table)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'save':  //新增
                        //清空之前的数据
                        $("#addForm")[0].reset();
                        form.render();
                        $("#spiderid").val("0")
                        layer.open({
                            type: 1,
                            shade: false,
                            title: false, //不显示标题
                            area: ['620px', '280px'], //宽高
                            content: $('#addPanel'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                            cancel: function(){
                                $(".layui-laypage-btn").click();//执行分页刷新当前页
                            }
                        });
                        break;
                    case 'remove': //删除
                        var data = checkStatus.data;
                        if(data.length<1)
                        {
                            layer.alert("请至少选择一个进行删除");
                            return false;  //阻止后面的动作
                        }
                        //获取要删除的数据
                        //演出一个确定要删除的提示
                        layer.confirm('你确定要删除么', function(index){
                            var spiderid=data[0]["spiderid"];
                            $.get("/admin/spider/remove/"+spiderid,{},function(data){
                                if(data.code==0)
                                {
                                    layer.close(index);
                                    layer.msg(data.msg);
                                    //把表格给刷新一下
                                    table.reload('table', {
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    });

                                }
                            },"json");
                        });

                        break;
                    case 'update': //修改
                        var data = checkStatus.data;
                        if(data.length==1)
                        {
                            var spiderid=data[0]["spiderid"];
                            //从后台获取到数据  前台要传递一个videoid到后台  返回视频详细信息
                            $.get("/admin/spider/querybyid/"+spiderid,{},function(pageResult){
                                //将数据填充到Form表单中
                                var obj=pageResult.data[0];
                                form.val("example",obj);
                                //弹出一个界面模板
                                layer.open({
                                    type: 1,
                                    shade: false,
                                    title: false, //不显示标题
                                    area: ['620px', '280px'], //宽高
                                    content: $('#addPanel'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                                    cancel: function(){
                                        $(".layui-laypage-btn").click();//执行分页刷新当前页
                                    }
                                });
                            },"json");
                        }
                        else
                        {
                            layer.alert("只能选择一个进行编辑");
                            return false;  //阻止后面的动作
                        }
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });






            //数据校验
            form.verify();
            //监听提交
            form.on('submit(demo1)', function(data){
                //区分一下  提交的动作是保存还是修改
                const obj=data.field;
                const spiderid=obj.spiderid;
                const method=spiderid==0?'save':'update';
                //我们要完成的工作就是把data.filed的数据传递到后台
                $.post("/admin/spider/"+method,data.field,function(data){
                    //判断是否提交成功
                    if(data.code==0)
                    {
                        //把表格给刷新一下
                        table.reload('table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        //关闭我们的弹出的框
                        layer.closeAll();
                        layer.msg(data.msg);
                    }
                },"json");
                //阻止表单跳转
                return false;
            });


        });



    </script>


<!--模板begin-->
<div id="addPanel"  style="padding: 10px; background-color: #F2F2F2;display:none">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <form class="layui-form" id="addForm" action="" lay-filter="example">
                        <input type="hidden" name="spiderid" id="spiderid" value="0">
                        <div class="layui-form-item">
                            <label class="layui-form-label">爬虫名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="spidername" lay-verify="required" autocomplete="off" placeholder="请输入爬虫名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">爬虫主页</label>
                            <div class="layui-input-block">
                                <input type="text" name="spiderurl" lay-verify="required" autocomplete="off" placeholder="请输入爬虫主页" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">爬虫本地路径</label>
                            <div class="layui-input-block">
                                <input type="text" name="spiderpath" lay-verify="required" autocomplete="off" placeholder="请输入爬虫本地路径" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<!--模板end-->

</html>
